import React from 'react';

import './index.less';
// visible={visible} onCancel={this.closeAlertModule} onOk={this.historyPush}
// onClick={this.showAlertModule} 点击出现
// showAlertModule=() => {
//   if (this.state.change === true) {
//     this.setState({ visible: true });
//   } else {
//     this.props.history.push('/Certificate/CertificateType');
//   }
// }
// closeAlertModule=() => {
//   this.setState({ visible: false });
// }
// historyPush=() => {
//   this.props.history.push('/Certificate/CertificateType');
//   this.setState({ visible: false });
// }
export default class AlertModule extends React.Component {
  handleOk = () => {
    console.log(this.props);
    this.props.onOk();
  };
  handleCancel = () => {
    this.props.onCancel();
  };
  render() {
    const { className, title, content, visible } = this.props;
    return (
      <div className={className}>
        <div className={`ant-modal-mask ${visible ? '' : 'hide-modal'}`} />
        <div className={`modal-wrap ${visible ? '' : 'hide-modal'}`}>
          <div className="cancel-modal">
            <div className="cancel-modal-header">
              <h4>{`${title || '确认离开页面吗?'}`}</h4>
            </div>
            <div className="cancel-modal-body">
              <p>{`${content || '如果确定离开的话,修改的资料会丢失'}`}</p>
            </div>
            <div className="cancel-modal-footer">
              <button className="modal-button" onClick={this.handleCancel}>取消</button>
              <button className="modal-button button-sure" onClick={this.handleOk}>确认</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
